<template>
  <div class="hello" align="left">
    <div style="margin-top:20px;margin-left:20px;">
      <el-form ref="form" :inline="true" :model="yy" label-width="80px" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="yy.shengId" placeholder="省" style="width:120px" @change="getShis">
            <el-option
              v-for="item in shengs"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="yy.shiId" placeholder="市" style="width:120px" @change="getXians">
            <el-option
              v-for="item in shis"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="yy.xianId" placeholder="区" style="width:120px">
            <el-option
              v-for="item in xians"
              :key="item.regionId"
              :label="item.regionName"
              :value="item.regionId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="roomName" placeholder="请输入楼盘关键字" style="width:150px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="qingkong">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-bottom:10px;margin-top:10px;">
      <template>
        <el-radio v-model="radio" label="0" style="margin-left:40px;">待看房</el-radio>
        <el-radio v-model="radio" label="1">已看房</el-radio>
      </template>
      <el-button type="primary" icon="el-icon-edit" :plain="true" @click="handleEdit">批量设置状态</el-button>
    </div>
    <el-table ref="table1" :data="yuyue" border style="width: 100%" @selection-change="selectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="id" width="180" />
      <el-table-column prop="roomName" label="楼盘名称" width="180" />
      <el-table-column prop="showingsName" label="预约人" />
      <el-table-column prop="showingsMobile" label="联系人电话" />
      <el-table-column prop="roomName" label="预约房源" />
      <el-table-column prop="reserveTime" label="预约时间" />
      <el-table-column prop="status" label="预约状态" :formatter="playbackFormat" />
    </el-table>
    <div style="margin-top: 20px;margin-left:20px;">
      <el-button @click="toggleSelection()">反选</el-button>
      <el-button @click="clearSelection()">取消选择</el-button>
    </div>
    <el-pagination
      background
      align="center"
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="currentChange"
    />
  </div>
</template>

<script>
import Axios from 'axios'
// import { param } from '../../utils'
export default {
  data() {
    return {
      yuyue: [],
      total: 0,
      pageSize: 5,
      radio: '',
      yy: {},
      shengs: [],
      shis: [],
      xians: [],
      roomName: '',
      ids: []
    }
  },
  mounted() {
    // 调用方法
    this.getYuyue()
    this.getShengs()
  },
  methods: {
    // 获取列表信息
    getYuyue(pageNum) {
      var search = {
        params: {
          pageNum: pageNum,
          roomName: this.roomName
        }
      }

      Axios.get('http://localhost:9999/wish/sizu/fangyuan/roomReservation/list', search).then(res => {
        this.yuyue = res.data.list
        this.total = res.data.total
        this.pageSize = res.data.pageSize
      })
    },
    // 分页，传参并调用方法
    currentChange(pageNum) {
      this.getYuyue(pageNum)
    },
    // 0返回待看房，1返回已看房
    playbackFormat(row, column) {
      if (row.status === 0) {
        return '待看房'
      } else {
        return '已看房'
      }
    },
    // 反选
    toggleSelection() {
      this.yuyue.forEach(row => {
        this.$refs.table1.toggleRowSelection(row)
      })
    },
    // 取消选择的选框
    clearSelection() {
      this.$refs.table1.clearSelection()
      this.radio = '' // 将单选框选中值清空
    },
    // 直接查询省数据（点击省触发市改变事件，点击市触发区改变事件）
    getShengs() {
      Axios.get(
        'http://localhost:9999/wish/sizu/fangyuan/region/regionList?parentId=1').then(res => {
        this.shengs = res.data
      })
    },
    getShis() {
      Axios.get(
        'http://localhost:9999/wish/sizu/fangyuan/region/regionList?parentId=' + this.yy.shengId).then(res => {
        this.shis = res.data
      })
    },
    getXians() {
      Axios.get(
        'http://localhost:9999/wish/sizu/fangyuan/region/regionList?parentId=' + this.yy.shiId).then(res => {
        this.xians = res.data
      })
    },
    // 清空  省、市、县、搜索区、选框
    qingkong() {
      this.yy.shengId = ''
      this.yy.shiId = ''
      this.yy.xianId = ''
      this.roomName = ''
      this.clearSelection()
      this.handleSearch()
    },
    // 获取复选框选中的id值
    selectionChange(selection) {
      this.ids.length = 0
      selection.forEach(element => {
        this.ids.push(element.id)
      })
    },
    // 编辑 预约状态 0-待看房 1-已看房
    handleEdit() {
      if (this.ids.length > 0) {
        if (this.radio.length > 0) {
          console.log(this.radio + '------')
          console.log(this.ids)
          Axios.get('http://localhost:9999/wish/sizu/fangyuan/roomReservation/update', {
            params: {
              ids: this.ids.join(','),
              status: this.radio
            }
          }).then((res) => {
            this.$message({
              showClose: true,
              message: '操作成功',
              type: 'success'
            })
            this.clearSelection()
            this.getYuyue()
          })
        } else {
          alert('请选择一个预约状态 ！')
        }
      } else {
        alert('请选择需要修改的数据 ！')
      }
    },
    // 搜索
    handleSearch() {
      this.getYuyue()
    }

  }
}
</script>

